<!-- components/reconciliation/TransactionInfoCell.vue -->
<template>
  <div class="transaction-info-cell">
    <div class="transaction-id">
      <el-tag type="success" size="small">流水</el-tag>
      <span class="transaction-number">{{ transaction.transactionId }}</span>
    </div>
    <div class="transaction-details">
      <div class="payer-name">{{ transaction.payerName }}</div>
      <div class="transaction-amount">¥{{ transaction.transactionAmount.toLocaleString() }}</div>
      <div class="transaction-date">{{ formatDateTime(transaction.transactionDate) }}</div>
    </div>
    <div class="bank-name">
      <el-tag type="info" size="small">{{ transaction.bankName }}</el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ReconciliationResult } from '@/types/reconciliation'

const props = defineProps<{
  transaction: ReconciliationResult['transactionInfo']
}>()

const formatDateTime = (dateTimeString: string) => {
  const date = new Date(dateTimeString)
  return `${date.toLocaleDateString('zh-CN')} ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`
}
</script>

<style scoped>
.transaction-info-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transaction-id {
  display: flex;
  align-items: center;
  gap: 8px;
}

.transaction-number {
  font-weight: 600;
  color: var(--el-color-success);
}

.transaction-details {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.payer-name {
  flex: 1;
  font-weight: 500;
}

.transaction-amount {
  font-weight: 600;
  color: var(--el-color-primary);
  margin: 0 8px;
}

.transaction-date {
  color: var(--el-text-color-secondary);
}

.bank-name {
  align-self: flex-start;
}
</style>